/* eslint-disable no-lone-blocks */
// import update from 'immutability-helper'
import type { FC } from "react";
import { useCallback, useState } from "react";

import { Card } from "./Card";

const style = {
  width: 400,
};

export interface Item {
  id: number;
  text: string;
}

export interface ContainerState {
  cards: Item[];
}

export const Container: FC = () => {
  {
    const [cards, setCards] = useState([
      {
        id: 1,
        text: "Write a cool JS library",
      },
      {
        id: 2,
        text: "Make it generic enough",
      },
      {
        id: 3,
        text: "Write README",
      },
      {
        id: 4,
        text: "Create some examples",
      },
      {
        id: 5,
        text:
          "Spam in Twitter and IRC to promote it (note that this element is taller than the others)",
      },
      {
        id: 6,
        text: "???",
      },
      {
        id: 7,
        text: "PROFIT",
      },
    ]);

    const moveCard = useCallback((dragIndex: number, hoverIndex: number) => {
      console.log(dragIndex, hoverIndex);
      setCards((preCards: Item[]) => {
        const dragItem = preCards[dragIndex];
        const arr = JSON.parse(JSON.stringify(preCards))
        arr.splice(dragIndex, 1);
        arr.splice(hoverIndex, 0, dragItem);
        console.log(arr);
        return arr;
      });
    }, []);

    console.log(cards);

    const renderCard = useCallback(
      (card: { id: number; text: string }, index: number) => {
        return (
          <Card
            key={card.id}
            index={index}
            id={card.id}
            text={card.text}
            moveCard={moveCard}
          />
        );
      },
      []
    );

    return (
      <>
        <div style={style}>{cards.map((card, i) => renderCard(card, i))}</div>
      </>
    );
  }
};
